<template>
  <div class="announcement"
       :style="announcementsHeight">
    <span>
      <span class="announcementHeader">热门问卷</span>
    </span>
    <VariableTable
      :table-data="pageData"
      :column-headers="columnHeaders"
      :show-header="false"
      :click-event="clickEventForContent"
    ></VariableTable>
    <!-- page-size 每页显示条目个数  total 总条目数 -->
    <el-pagination
      class="announcementPagination"
      background
      layout="prev, pager, next"
      :page-size="pageSize"
      :total="showTableData.length"
      :current-page.sync="currentPage"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
</template>

<script>
import VariableTable from './VariableTable'
export default {
  name: 'Questionnaire-List',
  components: {
    VariableTable
  },
  data () {
    return {
      announcementsHeight: {height: ''},
      // totalTableLength: 0, // 获取通告总数目
      pageSize: 8, // page-size 每页显示条目个数
      currentPage: 1,
      search: '',
      columnHeaders: [ // 列表的头标签
        {prop: 'name', label: '公告'},
        {prop: 'date', label: '日期'}
      ],
      tableData: [] // 存储通告数据
    }
  },
  mounted () {
    this.init()
    // 计算公告高度
    window.addEventListener('resize', this.calculateAnnouncementsHeight, false)
  },
  computed: {
    showTableData: {
      // 计算需要显示的的条目总量
      get () {
        return this.tableData.filter(data => !this.search ||
            data.name.toLowerCase().includes(this.search.toLowerCase()) ||
            data.date.includes(this.search))
      }
    },
    // 设置当前页的显示
    pageData: function () {
      return this.showTableData.slice(((this.currentPage) - 1) * this.pageSize, this.currentPage * this.pageSize)
    }
  },
  watch: {
    // 监听search变量，当search变化时，设置当前页数
    search: function () {
      this.handleCurrentChange(1)
    }
  },
  methods: {
    init () {
      this.setTableContent()
      this.calculateAnnouncementsHeight()
    },
    calculateAnnouncementsHeight () {
      // innerHeight 返回窗口的文档显示区的高度。
      this.announcementsHeight.height = (0.65 * window.innerHeight) + 'px'
    },
    setTableContent () {
      this.tableData = [{name: 'Johnny Appleseed', date: '2020-3-8'}, {name: 'Johnny Appleseed', date: '1010-10-10'},
        {name: 'Johnny Appleseed', date: '2020-5-20'}, {name: 'Johnny Appleseed', date: '1010-10-10'},
        {name: 'Johnny Appleseed', date: '2020-20-20'}, {name: 'Johnny Appleseed', date: '1010-10-10'},
        {name: 'Johnny Appleseed', date: '2020-20-20'}, {name: 'Johnny Appleseed', date: '1010-10-10'},
        {name: 'Johnny Appleseed', date: '3020-20-20'}, {name: 'Johnny Appleseed', date: '1010-10-10'},
        {name: 'Johnny Appleseed', date: '2020-20-20'}, {name: 'Johnny Appleseed', date: '1010-10-10'},
        {name: 'Johnny Appleseed', date: '2020-20-20'}, {name: 'Johnny Appleseed', date: '1010-10-10'},
        {name: 'Johnny Appleseed', date: '2020-20-20'}, {name: 'Johnny Appleseed', date: '1010-10-10'},
        {name: 'Johnny Appleseed', date: '2020-20-20'}, {name: 'Johnny Appleseed', date: '1010-10-10'},
        {name: 'Johnny Appleseed', date: '2020-20-20'}, {name: 'Johnny Appleseed', date: '1010-10-10'},
        {name: 'Johnny Appleseed', date: '2020-20-20'}, {name: 'Johnny Appleseed', date: '1010-10-10'}
      ]
    },
    handleCurrentChange (currentPage) {
      this.currentPage = currentPage
    },
    clickEventForContent (row) {
      this.$router.push({ path: '/Questionnaire/' + row.name })
    }
  }
}
</script>
<style scoped>
  .announcement{
    position: relative;
    margin: 5% auto 0 auto;
    width: 80%;
    min-height: 475px;
    border-right: solid aliceblue 2px;
    border-radius: 5px;
  }
  .announcementHeader{
    font-style: italic;
    font-size: 30px;
    display: inline-block;
    margin: auto;
  }
  .announcementPagination{
    position: absolute;
    bottom: 0;
    margin: 0 auto;
    width: 100%
  }
</style>
